<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>角色管理</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="/lib/ace/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/lib/ace/font-awesome/4.5.0/css/font-awesome.min.css" />

        <!--ztree-->
        <link rel="stylesheet" href="/lib/ztree/zTreeStyle.css" />

        <!--easyui-->
        <link rel="stylesheet" href="/lib/easyui/themes/default/easyui.css" />
        <link rel="stylesheet" href="/lib/easyui/themes/icon.css" />

		<!-- page specific plugin styles -->

        <!-- ztree -->
        <link rel="stylesheet" href="/lib/layui/css/layui.css">

		<!-- text fonts -->
		<link rel="stylesheet" href="/lib/ace/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
        <link rel="stylesheet" href="/lib/ace/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="/lib/ace/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="/lib/ace/css/ace-skins.min.css" />
		<link rel="stylesheet" href="/lib/ace/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="/lib/ace/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="/lib/ace/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="/lib/ace/js/html5shiv.min.js"></script>
		<script src="/lib/ace/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>

        <div class="main-container ace-save-state" id="app">
            <div class="main-content">
                <div class="main-content-inner">
                    <div class="page-content">
                        <div class="row" style="padding: 20px 10px 20px 20px">
                            <div class="col-xs-5">
                                <div class="table-header">
                                    <div style="font-size: 18px">
                                        角色列表 &nbsp;&nbsp;
                                        <a href="javascript:void(0)" data-toggle="modal" data-target="#addRolesForm">
                                            <span class="glyphicon glyphicon-plus-sign" style="font-size: 16px; color:salmon"></span>
                                        </a>
                                    </div> 
                                </div>

                                <div>
                                    <table id="simple-table" class="table  table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>角色名</th>
                                                <th>角色类型</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <tr v-for="(item ,i) in list" :key="item.id">
                                                <td v-cloak>{{ item.name }}</td>
                                                <td v-cloak>{{ item.type | typeFormat }}</td>
                                                <td v-cloak>{{ item.status | statusFormat }}</td>
                                                <td>
                                                    <div class="hidden-sm hidden-xs btn-group">
                                                        <button class="btn btn-xs btn-info" data-toggle="modal" data-target="#modifyRolesForm">
                                                            <i class="ace-icon fa fa-pencil bigger-120"></i>
                                                        </button>
                                                    
                                                        <button class="btn btn-xs btn-danger">
                                                            <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                                        </button>
                                                        <button class="btn btn-xs" @click="permission(i)">
                                                            权限
                                                        </button>
                                                        <button class="btn btn-xs" @click="user(i)">
                                                            用户
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-xs-7">
                                <div class="tabbable">
                                    <ul class="nav nav-tabs" id="myTab">
                                        <li class="active">
                                            <a data-toggle="tab" href="#rolesAndpermission">
                                                角色与权限
                                            </a>
                                        </li>

                                        <li>
                                            <a data-toggle="tab" href="#rolesAndManager">
                                                角色与用户
                                            </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content">
                                        <div id="rolesAndpermission" class="tab-pane fade in active">
                                            <div name="roleTree" id="addRoleTree" style="overflow: hidden">

                                            </div>
                                            <button class="btn btn-info saveRoleAcl" type="button" @click="addRoleAcl">
                                                <i class="ace-icon fa fa-check bigger-110"></i>
                                                保存
                                            </button>
                                        </div>

                                        <div id="rolesAndManager" class="tab-pane fade">
                                            <div class="col-sm-12">
                                                <div class="col-sm-6">
                                                    <div class="table-header">
                                                        <div style="font-size: 14px">
                                                            拥有当前角色的用户 &nbsp;&nbsp;
                                                            <!--<a href="javascript:void(0)" data-toggle="modal" data-target="#addRolesForm">-->
                                                            <!--<span class="glyphicon glyphicon-plus-sign" style="font-size: 16px; color:salmon"></span>-->
                                                            <!--</a>-->
                                                        </div>
                                                    </div>
                                                    <table class="table table-bordered table-hover">
                                                        <thead>
                                                        <tr>
                                                            <th>用户名</th>
                                                            <th>电话</th>
                                                            <th>邮箱</th>
                                                            <th>状态</th>
                                                        </tr>
                                                        </thead>

                                                        <tbody>
                                                        <tr v-for="(item ,i) in userList" :key="item.id">
                                                            <td v-cloak>{{item.username}}</td>
                                                            <td v-cloak>{{item.telephone}}</td>
                                                            <td v-cloak>{{item.mail}}</td>
                                                            <td v-cloak>{{item.status | stateFormat}}</td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="table-header">
                                                        <div style="font-size: 14px">
                                                            所有用户 &nbsp;&nbsp;
                                                            <!--<a href="javascript:void(0)" data-toggle="modal" data-target="#addRolesForm">-->
                                                            <!--<span class="glyphicon glyphicon-plus-sign" style="font-size: 16px; color:salmon"></span>-->
                                                            <!--</a>-->
                                                        </div>
                                                    </div>

                                                    <div name="userTree" id="addUserTree" style="overflow: hidden">

                                                    </div>
                                                </div>
                                            </div>

                                            <div style="padding-left: 50%">
                                                <button class="btn btn-info btn-sm saveRoleAcl" type="button" @click="addRoleUser">
                                                    <i class="ace-icon fa fa-check bigger-110"></i>
                                                    保存
                                                </button>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 表单 -->
                        <div class="modal fade" id="addRolesForm" tabindex="-1" role="dialog" aria-labelledby="rolesFormLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="addRolesFormLabel">角色添加</h4>
                                    </div>
                                    <div class="modal-body">
    
                                        <form class="form-horizontal" role="form">
                                            <div class="form-group">
    
                                                <label class="col-sm-4 control-label no-padding-right" >
                                                    <span style="color: red;">*</span>角色名:
                                                </label>
    
                                                <div class="col-sm-5">
                                                    <input type="text" required placeholder="请输入用户名" class="col-sm-12" />
                                                </div>
                                            </div>

                                            <div class="form-group">
    
                                                    <label class="col-sm-4 control-label no-padding-right" >
                                                        <span style="color: red;">*</span>角色类型:
                                                    </label>
        
                                                    <div class="col-sm-5">
                                                        <select class="form-control">
                                                            <option value="">请选择状态</option>
                                                            <option value="1">管理员角色</option>
                                                            <option value="0">其他</option>
                                                        </select>
                                                    </div>
                                                </div>
    
                                            <div class="form-group">
    
                                                <label class="col-sm-4 control-label no-padding-right" >
                                                    <span style="color: red;">*</span>状态:
                                                </label>
    
                                                <div class="col-sm-5">
                                                    <select class="form-control">
                                                        <option value="">请选择状态</option>
                                                        <option value="1">有效</option>
                                                        <option value="0">冻结</option>
                                                    </select>
                                                </div>
                                            </div>
    
                                            <div class="form-group">
    
                                                <label class="col-sm-4 control-label no-padding-right" >
                                                    备注:
                                                </label>
    
                                                <div class="col-sm-5">
                                                    <textarea class="form-control"></textarea>
                                                </div>
                                            </div>
                                        </form>
    
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" id="add_roles_submit">立即提交</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal fade" id="modifyRolesForm" tabindex="-1" role="dialog" aria-labelledby="rolesFormLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="modifyRolesFormLabel">角色修改</h4>
                                    </div>
                                    <div class="modal-body">
    
                                        <form class="form-horizontal" role="form">
                                            <div class="form-group">
    
                                                <label class="col-sm-4 control-label no-padding-right" >
                                                    <span style="color: red;">*</span>角色名:
                                                </label>
    
                                                <div class="col-sm-5">
                                                    <input type="text" required placeholder="请输入用户名" class="col-sm-12" />
                                                </div>
                                            </div>

                                            <div class="form-group">
    
                                                    <label class="col-sm-4 control-label no-padding-right" >
                                                        <span style="color: red;">*</span>角色类型:
                                                    </label>
        
                                                    <div class="col-sm-5">
                                                        <select class="form-control">
                                                            <option value="">请选择状态</option>
                                                            <option value="1">管理员角色</option>
                                                            <option value="0">其他</option>
                                                        </select>
                                                    </div>
                                                </div>
    
                                            <div class="form-group">
    
                                                <label class="col-sm-4 control-label no-padding-right" >
                                                    <span style="color: red;">*</span>状态:
                                                </label>
    
                                                <div class="col-sm-5">
                                                    <select class="form-control">
                                                        <option value="">请选择状态</option>
                                                        <option value="1">有效</option>
                                                        <option value="0">冻结</option>
                                                    </select>
                                                </div>
                                            </div>
    
                                            <div class="form-group">
    
                                                <label class="col-sm-4 control-label no-padding-right" >
                                                    备注:
                                                </label>
    
                                                <div class="col-sm-5">
                                                    <textarea class="form-control"></textarea>
                                                </div>
                                            </div>
                                        </form>
    
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" id="modify_roles_submit">立即提交</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="/lib/ace/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
            <script src="/lib/ace/js/jquery-1.11.3.min.js"></script>
        <![endif]-->

		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='/lib/ace/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="/lib/ace/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->

        <!-- layui-->
        <script src="/lib/layui/layui.js"></script>

        <!--ztree-->
        <script src="/lib/ztree/jquery.ztree.all.min.js"></script>

        <script src="/lib/easyui/jquery.easyui.min.js"></script>
        <script src="/lib/easyui/locale/easyui-lang-zh_CN.js"></script>

		<!-- ace scripts -->
		<script src="/lib/ace/js/ace-elements.min.js"></script>
        <script src="/lib/ace/js/ace.min.js"></script>

        <!--vue-->
        <script src="/lib/vue/vue.js"></script>

        <!-- 自己 js -->
        <script src="/js/role.js"></script>
	</body>
</html>
